<template>
	<view class="index">
		<mescroll-uni height="100%" bottom="100" :up="upOption" :down="downOption">
			<view class="product-info-wrapper">
				<view class="supplier-wrapper">
					<view class="name">客户：{{ info.customerPetName }} </view>
					<uni-icons type="phone" size="18" class="icon" color="#666666"></uni-icons>
					<text class="tel">{{ info.mobilePhone }}</text>
				</view>
				<view class="product-info">
					<view class="productName-wrapper">
						<view class="productName">
							{{ info.productName }}
						</view>
						<!-- <uni-icons type="right" color="#999999" size="18"></uni-icons> -->
					</view>
					<view class="info-wrapper">
						<view class="item flex">
							货号：{{ info.productCode }}
						</view>
						<view class="item flex">
							供应商：{{ info.supplierName || '-' }} {{ info.serviceTel || '' }}
						</view>
						<view class="item flex">
							下单时间：{{ info.orderDate }}
						</view>
						<view class="item">
							下单件数：{{ info.quantity }}件
						</view>
						<view v-if="!isOutStock" class="item">
							实配件数：{{ info.actualQuantity }}件
						</view>
						<view v-else class="item">
							缺货件数：{{ info.quantity - info.actualQuantity }}件
						</view>
						<view class="item">
							销售单价：{{ info.price }}元/件
						</view>
						<view v-if="info.voucherFee" class="item">
							代金券：{{ info.voucherFee }}元
						</view>
						<view v-if="info.adjustRefund" class="item">
							降价退款：{{ info.adjustRefund }}元
						</view>
						<view class="item">
							实付金额：{{ actualPayment }}元
						</view>
					</view>
				</view>
			</view>
			<view class="form-wrapper">
				<view class="title-wrapper">
					<view class="title">
						货号
					</view>
				</view>
				<view class="form-item noborder">
					<view class="form-label">
						申请原因
					</view>
					<view class="form-value" @click="goReason">
						<input class="input" disabled v-model="form.reason" type="text" placeholder="选择售后申请原因" />
						<view class="unit" v-if="!isOutStock">
							<text>请选择</text>
							<uni-icons type="right" size="14" color="#898989"></uni-icons>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						报损件数
					</view>
					<view class="form-value">
						<input class="input" @input="changeLossNum" v-model="form.lossNum" type="digit"
							placeholder="输入报损件数" />
						<view class="unit">
							<text>件</text>
							<uni-icons type="right" size="14" color="#ffffff"></uni-icons>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						报损重量(净重)
					</view>
					<view class="form-value">
						<input class="input" @input="changeLossWeight" v-model="form.lossWeight" type="digit"
							placeholder="输入报损重量(净重)" />
						<view class="unit">
							<text>斤</text>
							<uni-icons type="right" size="14" color="#ffffff"></uni-icons>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						预估退款
					</view>
					<view class="form-value">
						<input class="input" disabled v-model="form.estimatedRefund" type="digit"
							placeholder="系统自动计算" />
						<view class="unit">
							<text>元</text>
							<uni-icons type="right" size="14" color="#ffffff"></uni-icons>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						申请退款
					</view>
					<view class="form-value">
						<input class="input" v-model="form.applyRefund" type="digit" placeholder="输入申请退款金额" />
						<view class="unit">
							<text>元</text>
							<uni-icons type="right" size="14" color="#ffffff"></uni-icons>
						</view>
					</view>
				</view>
				<view class="form-item textarea">
					<view class="form-label">
						<text>具体描述</text>
						<text class="small">{{ form.afterSalesDesc.length }}/100</text>
					</view>
					<view class="form-value">
						<textarea v-model="form.afterSalesDesc" maxlength="100" class="textarea"
							placeholder="售后问题的具体描述~" />
					</view>
				</view>
				<view class="form-item textarea">
					<view class="form-label">
						<text>相关凭证</text>
					</view>
					<view class="form-value">
						<view class="product-image-list">
							<view class="item" v-for="(item,index) in imagelist" :key="index">
								<image v-if="item.type === 0 || item.type === 2" @click="openPic(item.url)"
									:src="item.url+ '?imageView2/3/w/300/q/100'" class="product-image"
									mode="aspectFill">
								</image>
								<image v-else @click="openVideo(item.url)" :src="item.url+'?vframe/jpg/offset/1'"
									class="product-image" mode="aspectFill"></image>
								<image v-if="item.type === 1" @click="openVideo(item.url)"
									src="../static/image/play.png" class="playImage" mode="widthFix"></image>
								<view class="del-wrapper" @click="delImage(index)">
									<uni-icons type="trash" color="#ffffff" size="20"></uni-icons>
								</view>
							</view>
							<view class="item add-item" @click="selectUploadMethod">
								<uni-icons type="plusempty" size="40" color="#A2A6A3"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="block">

			</view>
		</mescroll-uni>
		<view class="btn-wrapper">
			<view class="btn" @click="goBack">
				取消申请
			</view>
			<view class="btn primary" @click="submit">
				提交申请
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				upOption: {
					use: false
				},
				downOption: {
					use: false
				},
				form: {
					afterSalesDesc: '',
					afterSalesImage: '',
					applyRefund: '',
					reason: '',
					reasonId: '',
					reasonIiId: '',
					reasonIi: '',
					startBy: 'CITY',
					orderItemId: '',
					estimatedRefund: '',
					lossNum: '',
					lossWeight: '',
					type: ''
				},
				info: {},
				imagelist: [],
				disabled: false,
				isOutStock: false, //是否缺货
			}
		},
		onLoad(option) {
			this.info = uni.getStorageSync('afterSaleApplyProductInfo')
			this.form.orderItemId = this.info.id;
			if (option.type) {
				this.isOutStock = true;
				this.getReason()
				this.form.lossNum = this.info.quantity - this.info.actualQuantity;
				this.changeLossNum()
			}
		},
		computed: {
			actualPayment() {
				return this.info.productPayment - (this.info.voucherFee || 0) - (this.info.adjustRefund || 0)
			}
		},
		methods: {
			async getReason() {
				const data = await this.$api.post('/app/after-sale-reason/listNoPage', {
					"orders": [{
						"asc": true,
						"column": "reasonSort"
					}],
				}, false)
				if (data.code === 200) {
					const obj = data.data.find(item => {
						return item.parentId == '0' && item.type === 0
					})
					this.form.reasonId = obj.id;
					this.form.reason = obj.reason;
					this.form.type = obj.type;
				}
			},
			goBack() {
				uni.navigateBack()
			},
			goReason() {
				if (this.isOutStock) return
				uni.navigateTo({
					url: '/subPage_afterSale/selectReason?isOutStock=' + this.isOutStock + '&reasonId=' + this.form
						.reasonId + "&reasonIiId=" + this
						.form.reasonIiId
				})
			},
			setReason(item) {
				// if (!item.parentName) {
				// 	this.form.reasonId = item.id;
				// 	this.form.reason = item.reason;
				// 	this.form.reasonIiId = '';
				// 	this.form.reasonIi = '';
				// } else {
				// 	this.form.reasonId = item.parentId;
				// 	this.form.reason = item.parentName;
				// 	this.form.reasonIiId = item.id;
				// 	this.form.reasonIi = item.reason;
				// }
				this.form.reasonId = item.id;
				this.form.reason = item.reason;
				this.form.type = item.type;
			},
			changeLossNum() {
				if (this.form.lossNum) {
					this.form.lossWeight = this.info.netWeight * this.form.lossNum;
					this.form.estimatedRefund = this.form.lossNum * this.info.price;
					if (this.form.estimatedRefund > this.actualPayment) {
						this.form.estimatedRefund = this.actualPayment;
					}
				} else {
					this.form.lossWeight = 0;
					this.form.estimatedRefund = 0;
				}
			},
			changeLossWeight() {
				if (this.form.lossWeight) {
					this.form.estimatedRefund = this.form.lossWeight * (this.info.price / this.info.netWeight);
					this.form.estimatedRefund = parseFloat(this.form.estimatedRefund.toFixed(2))
					if (this.form.estimatedRefund > this.actualPayment) {
						this.form.estimatedRefund = this.actualPayment;
					}
				} else {
					this.form.estimatedRefund = 0;
				}
			},
			openVideo(url) {
				// uni.navigateTo({
				// 	url: '/pages/workbench/components/shootingVideo/openVideo?url=' + url
				// })
			},
			delImage(index) {
				uni.showModal({
					title: '提示',
					content: '是否删除该商品图片？',
					success: (e) => {
						if (e.confirm) {
							this.imagelist.splice(0, 1)
						}
					}
				})
			},
			selectUploadMethod() {
				const _this = this;
				uni.showActionSheet({
					itemList: ['相机', '图片', '视频'],
					success: function(res) {
						if (res.tapIndex === 0) {
							_this.uploadByImage('camera')
						} else if (res.tapIndex === 1) {
							_this.uploadByImage('album')
						} else if (res.tapIndex === 2) {
							_this.uploadByVideo();
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			async uploadByImage(type) {
				let _this = this;
				uni.chooseImage({
					count: 9 - _this.imagelist.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: [type], //从相册选择
					success: async (res) => {
						let paths = [];
						for (const [index, item] of res.tempFilePaths.entries()) {
							const url = await _this.$uploadFn(item, 0, 'refund', 0, true);
							paths.push({
								index,
								url
							});
						}
						paths.sort((a, b) => a.index - b.index);
						for (const obj of paths) {
							_this.imagelist.push({
								url: obj.url,
								type: 0,
								cover: !_this.imagelist.length
							});
						}
					}
				})
			},
			uploadByVideo() {
				let _this = this;
				uni.chooseVideo({
					//count: 9 - this.form.productRequest.productImage.length, //默认9
					//sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					compressed: false,
					success: async (res) => {
						const url = await _this.$uploadFn(res.tempFilePath, 1, 'refund', 0, true)
						_this.imagelist.push({
							url: url,
							type: 1
						})
					}
				})
			},
			async submit() {
				if (this.disabled) return
				const params = {
					...this.form
				}
				if (!params.reasonId) {
					uni.showToast({
						title: '请选择申请原因',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (parseFloat(params.lossNum) > parseFloat(this.info.quantity)) {
					uni.showToast({
						title: '报损件数不能大于下单件数(' + this.info.quantity + '件)',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!params.lossWeight) {
					uni.showToast({
						title: '请输入报损重量',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (parseFloat(params.lossWeight) > parseFloat(this.info.quantity * this.info.netWeight)) {
					uni.showToast({
						title: '报损重量不能大于下单净重(' + this.info.quantity * this.info.netWeight + '斤)',
						icon: 'none',
						duration: 2000
					})
					return
				}

				if (!params.applyRefund) {
					uni.showToast({
						title: '请输入申请退款金额',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (parseFloat(params.applyRefund) > parseFloat(params.estimatedRefund)) {
					uni.showToast({
						title: '申请退款金额不能大于预估金额',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!params.afterSalesDesc) {
					uni.showToast({
						title: '请输入具体描述',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.imagelist.length) {
					uni.showToast({
						title: '请上传相关凭证',
						icon: 'none',
						duration: 2000
					})
					return
				}
				params.afterSalesImage = JSON.stringify(this.imagelist)
				console.log(params)
				this.disabled = true;
				const data = await this.$api.post('/app/after-sales/apply', params)
				if (data.code === 200) {
					uni.showToast({
						title: '已申请'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/subPage_afterSale/index?type=1'
						})
					}, 1000)
				} else {
					this.disabled = false;
				}
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: hidden;

		.block {
			height: 150rpx;
		}

		.product-info-wrapper {
			margin: 20upx;
			border-radius: 20upx;
			background-color: #ffffff;
			overflow: hidden;

			.supplier-wrapper {
				height: 80upx;
				display: flex;
				align-items: center;
				padding: 0 30upx;
				background-color: #F5F6FA;

				.name {
					flex: 1;
					font-size: 32upx;
					//width: 500rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 1; //行数
					line-clamp: 1;
					-webkit-box-orient: vertical; //盒子中内容竖直排列
					font-weight: bold;
					color: #343434;
				}

				.tel {
					font-size: 32upx;
					color: #343434;
				}
			}

			.product-info {
				overflow: hidden;
				padding: 0 30upx;

				.productName-wrapper {
					margin-top: 20upx;
					display: flex;
					align-items: center;

					.productName {
						flex: 1;
						font-size: 32upx;
						//width: 500rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 1; //行数
						line-clamp: 1;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
						font-weight: bold;
						color: #464646;
					}
				}

				.info-wrapper {
					display: flex;
					flex-wrap: wrap;
					padding-bottom: 20upx;

					.item {
						width: 50%;
						margin-top: 20upx;
						font-size: 32upx;
						color: #666666;

						&.flex {
							width: 100%;
						}
					}
				}
			}
		}

		.form-wrapper {
			background-color: #ffffff;
			margin: 20upx 20upx 0 20upx;
			border-radius: 20upx;
			padding: 25upx;

			.title-wrapper {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.icon {
					margin-right: 5upx;
				}

				.title {
					height: 34upx;
					line-height: 34upx;
					font-size: 34upx;
					color: #222222;
					padding-left: 10upx;
					border-left: 8upx solid #F26022;

					&.require::after {
						content: '*';
						color: red;
					}
				}
			}

			.form-item {
				display: flex;
				align-items: center;
				font-size: 32upx;
				min-height: 90upx;
				border-top: 1rpx solid #efefef;

				&.noborder {
					border-top: 0;
				}



				.form-label {
					color: #232323;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&.require::after {
						content: '*';
						color: red;
					}

					.small {
						font-size: 24rpx;
						color: #787878;
					}
				}

				.form-value {
					flex: 1;
					color: #666666;
					display: flex;
					align-items: center;

					.input {
						padding: 0 20upx;
						text-align: left;
						flex: 1;
						color: #212121;
						font-size: 30upx;
					}

					.textarea {
						width: 100%;
						padding: 20rpx;
						height: 100rpx;
						font-size: 30upx;
					}

					.value {
						text-align: left;
						flex: 1;
						color: #212121;

						&.placeholder {
							color: #898989;
						}
					}

					.unit {
						color: #232323;
					}
				}

				&.textarea {
					display: block;

					.form-label {
						margin-top: 20upx;
					}

					.textarea {
						padding: 20upx 0;
					}

					.product-image-list {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						margin-top: 26upx;

						.item {
							position: relative;
							width: 32%;
							height: 206upx;
							border-radius: 20upx;
							overflow: hidden;
							margin-left: 2%;
							margin-bottom: 20upx;

							&.add-item {
								display: flex;
								align-items: center;
								justify-content: center;
								background-color: #F0F0F0;
							}

							&:nth-child(3n+1) {
								margin-left: 0;
							}

							.playImage {
								position: absolute;
								width: 50upx;
								height: 50upx;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
							}

							.product-image {
								width: 100%;
								height: 100%;
							}

							.del-wrapper {
								position: absolute;
								width: 50upx;
								height: 50upx;
								display: flex;
								align-items: center;
								justify-content: center;
								background-color: rgba(0, 0, 0, .5);
								top: 0;
								right: 0;
							}

							.bottom-btn {
								position: absolute;
								width: 100%;
								height: 60upx;
								display: flex;
								align-items: center;
								justify-content: center;
								background-color: rgba(0, 0, 0, .5);
								bottom: 0;
								left: 0;
								color: #ffffff;

								&.current {
									color: #F26022;
								}
							}
						}
					}
				}
			}
		}

		.btn-wrapper {
			width: 100%;
			background-color: #ffffff;
			height: 100upx;
			position: fixed;
			bottom: 0;
			display: flex;
			box-shadow: 0 0 10rpx 0rpx #cecece;
			z-index: 9;

			.btn {
				border: 1upx solid #bbbbbb;
				border-radius: 5upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				margin: 14upx 20upx 14upx 0;
				flex: 1;

				&:first-child {
					margin-left: 20upx;
				}

				&.primary {
					border-color: #F26022;
					color: #ffffff;
					background-color: #F26022;
					flex: 2;
				}
			}
		}
	}
</style>